ExtJS Tree Panel একটি বিশেষ ধরনের কম্পোনেন্ট যা হায়ারারকিক্যাল ডেটা বা ডেটা স্ট্রাকচার উপস্থাপন করতে ব্যবহৃত হয়। এটি সাধারণত ডেটার মধ্যে প্যারেন্ট-চাইল্ড সম্পর্ক প্রদর্শন করতে ব্যবহৃত হয়, যেমন ফাইল সিস্টেম, ক্যাটেগরি হায়ারারকি, এবং আরও অনেক কিছু।

এছাড়া, Nested Data Structures হল এমন ডেটা যা একটি ভেতরের ডেটা স্ট্রাকচার ধারণ করে, যেমন একটি অগণিত তালিকা বা অবজেক্ট যা অন্য একটি তালিকা বা অবজেক্ট ধারণ করে। ExtJS তে Tree Panel এমন ধরনের ডেটা পরিচালনা করতে অত্যন্ত কার্যকরী।

Tree Panel কী?

Tree Panel একটি ExtJS কম্পোনেন্ট যা হায়ারারকিক্যাল ডেটা প্রদর্শন করার জন্য ব্যবহৃত হয়। এটি একটি বা একাধিক স্তরের মধ্যে সম্পর্কিত ডেটা ভিজ্যুয়ালাইজ করতে সাহায্য করে। উদাহরণস্বরূপ, একটি ফোল্ডার-ফাইল সিস্টেম যেখানে ফোল্ডারগুলোর মধ্যে অন্যান্য ফোল্ডার এবং ফাইল থাকতে পারে।

ExtJS Tree Panel তৈরি এবং কনফিগার করা

Tree Panel তৈরির জন্য Ext.tree.Panel ক্লাস ব্যবহার করা হয়। এর মধ্যে store, root এবং columns কনফিগারেশন ব্যবহার করা হয়। Tree Panel ডেটা স্টোরে nested data রাখে এবং সেটি হায়ারারকিক্যালভাবে প্রদর্শন করে।

Tree Panel তৈরি করা

Ext.create('Ext.tree.Panel', {
    title: 'File Explorer', // প্যানেলের শিরোনাম
    width: 400,
    height: 300,
    store: Ext.create('Ext.data.TreeStore', {
        root: {
            text: 'Root Folder', // রুট ফোল্ডারের নাম
            expanded: true,      // রুট ফোল্ডারটি এক্সপ্যান্ড করা
            children: [         // nested children (ফোল্ডার ও ফাইল)
                {
                    text: 'Documents',
                    expanded: true,
                    children: [
                        { text: 'File 1.txt', leaf: true },
                        { text: 'File 2.txt', leaf: true }
                    ]
                },
                {
                    text: 'Images',
                    expanded: true,
                    children: [
                        { text: 'Image 1.jpg', leaf: true },
                        { text: 'Image 2.png', leaf: true }
                    ]
                }
            ]
        }
    }),
    renderTo: Ext.getBody() // কম্পোনেন্টটিকে DOM এ রেন্ডার করা
});

এখানে:

• store: TreeStore ব্যবহার করা হয়েছে, যেখানে root এবং children দ্বারা হায়ারারকিক্যাল ডেটা সংরক্ষণ করা হচ্ছে।
• text: প্রতিটি নোডের নাম।
• leaf: true দিলে নোডটি একটি পাতা (leaf node) হিসেবে চিহ্নিত হয়, অর্থাৎ এটি আর কোনো চাইল্ড নোড ধারণ করে না।
• expanded: true দিলে নোডটি এক্সপ্যান্ড করা হয় এবং তার চাইল্ড নোডগুলো প্রদর্শিত হয়।

Nested Data Structures with Tree Panel

Tree Panel সাধারণত এমন ডেটা স্ট্রাকচার প্রদর্শন করে যা nested বা হায়ারারকিক্যাল থাকে, যেমন একটি ফোল্ডার সিস্টেম যেখানে ফোল্ডারের ভিতরে আরও ফোল্ডার থাকতে পারে এবং প্রতিটি ফোল্ডারের মধ্যে ফাইল থাকতে পারে।

Nested Data Structure উদাহরণ

ধরা যাক, একটি কোম্পানির ডিপার্টমেন্ট এবং এমপ্লয়ি সম্পর্কিত ডেটা রয়েছে। এটি TreeStore ব্যবহার করে হায়ারারকিক্যালভাবে প্রদর্শন করা যাবে।

Ext.create('Ext.tree.Panel', {
    title: 'Company Structure',
    width: 400,
    height: 300,
    store: Ext.create('Ext.data.TreeStore', {
        root: {
            text: 'Company',
            expanded: true,
            children: [
                {
                    text: 'HR Department',
                    expanded: true,
                    children: [
                        { text: 'John Doe (Manager)', leaf: true },
                        { text: 'Jane Smith (HR Assistant)', leaf: true }
                    ]
                },
                {
                    text: 'Engineering Department',
                    expanded: true,
                    children: [
                        { text: 'Mike Johnson (Engineer)', leaf: true },
                        { text: 'Sarah Lee (Developer)', leaf: true }
                    ]
                }
            ]
        }
    }),
    renderTo: Ext.getBody()  // Tree Panel কে HTML body তে রেন্ডার করা
});

এখানে:

• children ব্যবহার করে আমরা ডিপার্টমেন্টের ভিতরে অন্যান্য ডিপার্টমেন্ট বা এমপ্লয়ি যুক্ত করেছি।
• leaf: যেসব নোডের কোনো চাইল্ড নোড নেই, সেগুলির মধ্যে leaf: true ব্যবহার করা হয়।

TreePanel এর অন্যান্য কনফিগারেশন

1. viewConfig: এটি আপনাকে কাস্টম ভিউ কনফিগারেশন করতে সাহায্য করে, যেমন নোডগুলির ড্র্যাগ-এন্ড-ড্রপ সক্ষম করা।
2. listeners: Tree Panel এ বিভিন্ন ইভেন্ট হ্যান্ডলার যোগ করা যেতে পারে, যেমন itemclick, selectionchange, ইত্যাদি।
3. columns: Tree Panel এ বিভিন্ন কলাম কনফিগারেশন করা যায় (যদি আপনি tree panel এর মধ্যে টেবিল-স্টাইল ডেটা প্রদর্শন করতে চান)।

ড্র্যাগ-এন্ড-ড্রপ ফিচার যোগ করা

Tree Panel এ ড্র্যাগ-এন্ড-ড্রপ ফিচার যোগ করতে viewConfig ব্যবহার করা যেতে পারে।

Ext.create('Ext.tree.Panel', {
    title: 'Drag and Drop Example',
    width: 400,
    height: 300,
    store: Ext.create('Ext.data.TreeStore', {
        root: {
            text: 'Root Node',
            expanded: true,
            children: [
                { text: 'Node 1', leaf: true },
                { text: 'Node 2', leaf: true }
            ]
        }
    }),
    viewConfig: {
        plugins: {
            ptype: 'treeviewdragdrop' // ড্র্যাগ-এন্ড-ড্রপ সক্ষম করা
        }
    },
    renderTo: Ext.getBody()
});

এখানে, ptype: 'treeviewdragdrop' দ্বারা ড্র্যাগ-এন্ড-ড্রপ প্লাগইন সক্রিয় করা হয়েছে, যার মাধ্যমে ইউজাররা এক নোড থেকে অন্য নোডে ডেটা সরাতে পারবে।

সারাংশ

• Tree Panel ExtJS এর একটি শক্তিশালী কম্পোনেন্ট যা হায়ারারকিক্যাল বা nested ডেটা প্রদর্শন করতে ব্যবহৃত হয়।
• TreeStore ব্যবহার করে আপনি ডেটার রুট, চাইল্ড এবং পাতা (leaf) নোডগুলির হায়ারারকিক্যাল স্ট্রাকচার তৈরি করতে পারেন।
• Nested Data এমন ডেটা যা একটি মডেল বা অবজেক্টের ভিতরে অন্য মডেল বা অবজেক্ট ধারণ করে।
• ExtJS Tree Panel ড্র্যাগ-এন্ড-ড্রপ, কলাম কনফিগারেশন এবং অন্যান্য অনেক কাস্টমাইজেশন সমর্থন করে।

Tree Panel ব্যবহার করে আপনি সহজেই হায়ারারকিক্যাল ডেটা প্রদর্শন এবং ম্যানিপুলেট করতে পারেন, যা একাধিক স্তরের সম্পর্ক এবং ডেটা স্ট্রাকচার ম্যানেজ করার জন্য উপযুক্ত।

ExtJS এর Tree Panel একটি প্যানেল কম্পোনেন্ট যা হায়ারারকিক্যাল ডেটা (ডেটার গাছ) প্রদর্শন করার জন্য ব্যবহৃত হয়। এটি সাধারনত ফাইল সিস্টেম, কেটাগরি লিস্ট, অথবা কোনো ডেটা সেটের সম্পর্কিত উপাদানগুলো প্রদর্শন করতে ব্যবহৃত হয়। Data Binding এর মাধ্যমে Tree Panel এবং মডেল/স্টোরের মধ্যে সংযোগ স্থাপন করা যায়, যার ফলে ডেটা আপডেট হলে UI স্বয়ংক্রিয়ভাবে রিফ্রেশ হয়।

১. Tree Panel তৈরি

Tree Panel ব্যবহার করে হায়ারারকিক্যাল ডেটা বা গাছের আকারে তথ্য প্রদর্শন করা হয়। ExtJS তে Ext.tree.Panel কম্পোনেন্টটি এটি তৈরি করার জন্য ব্যবহৃত হয়।

Tree Panel উদাহরণ:

Ext.create('Ext.tree.Panel', {
    title: 'Simple TreePanel Example',
    width: 300,
    height: 200,
    store: {
        xtype: 'tree',
        root: {
            text: 'Root Node',
            expanded: true,
            children: [
                { text: 'Child Node 1', leaf: true },
                { text: 'Child Node 2', leaf: true },
                { text: 'Child Node 3', expanded: true, children: [
                    { text: 'Grandchild Node 1', leaf: true },
                    { text: 'Grandchild Node 2', leaf: true }
                ]}
            ]
        }
    },
    rootVisible: false, // Root node will not be visible
    renderTo: Ext.getBody()
});

• store: xtype: 'tree' দ্বারা স্টোর তৈরি হচ্ছে, যা গাছের ডেটা ধারণ করে।
• root: গাছের মূল নোড (root node) নির্ধারণ করা হচ্ছে এবং এটি তিনটি সন্তানের নোডসহ তৈরি করা হচ্ছে।
• rootVisible: false দিলে রুট নোডটি UI তে দেখানো হবে না।

Tree Panel কনফিগারেশন:

• leaf: যদি true থাকে, তাহলে এটি একটি পাতা নোড হবে (এটি আর কোনো সন্তানের নোড ধারণ করবে না)।
• expanded: এটি নোডটিকে ডিফল্টভাবে সম্প্রসারিত করবে।
• text: নোডের টেক্সট বা নাম।
• children: নোডের সন্তানের নোডগুলি।

২. Data Binding

ExtJS তে Data Binding এর মাধ্যমে আপনি UI কম্পোনেন্ট (যেমন Tree Panel) এবং ডেটার মধ্যে সংযোগ স্থাপন করতে পারেন, যাতে ডেটা আপডেট হলে UI স্বয়ংক্রিয়ভাবে আপডেট হয়। Data Binding এর মাধ্যমে, যখন স্টোরে কোনো পরিবর্তন হয়, তখন তা অটোমেটিক্যালি Tree Panel এর সাথে সিঙ্ক্রোনাইজ হয়।

Data Binding উদাহরণ:

Ext.create('Ext.tree.Panel', {
    title: 'TreePanel with Data Binding',
    width: 300,
    height: 200,
    store: {
        xtype: 'tree',
        model: 'MyApp.model.TreeNode',  // মডেল নির্ধারণ করা হচ্ছে
        root: {
            text: 'Root Node',
            expanded: true,
            children: [
                { text: 'Child Node 1', leaf: true },
                { text: 'Child Node 2', leaf: true },
                { text: 'Child Node 3', expanded: true, children: [
                    { text: 'Grandchild Node 1', leaf: true },
                    { text: 'Grandchild Node 2', leaf: true }
                ]}
            ]
        }
    },
    rootVisible: false, // Root node will not be visible
    renderTo: Ext.getBody()
});

এখানে:

• store: স্টোরে model কনফিগারেশন ব্যবহার করে আমরা একটি মডেল যুক্ত করেছি।
• model: এটি Tree Panel এর জন্য মডেল তৈরি করে, যা ডেটার কাঠামো নির্ধারণ করে।

Model উদাহরণ:

Ext.define('MyApp.model.TreeNode', {
    extend: 'Ext.data.Model',
    fields: ['text', 'leaf', 'expanded', 'children']
});

• fields: এটি মডেলের জন্য ডেটা ফিল্ড নির্ধারণ করে, যেমন text, leaf, expanded, এবং children।

৩. Tree Panel এবং Store এর মধ্যে Data Binding

ExtJS এ Tree Panel এর সাথে স্টোর ডেটা বাইন্ডিং করার মাধ্যমে, ডেটা আপডেট হলে UI কম্পোনেন্ট যেমন Tree Panel স্বয়ংক্রিয়ভাবে রিফ্রেশ হয়।

Dynamic Data Binding উদাহরণ:

Ext.create('Ext.tree.Panel', {
    title: 'Dynamic TreePanel with Data Binding',
    width: 300,
    height: 200,
    store: {
        xtype: 'tree',
        model: 'MyApp.model.TreeNode',
        root: {
            text: 'Root Node',
            expanded: true,
            children: [
                { text: 'Child Node 1', leaf: true },
                { text: 'Child Node 2', leaf: true }
            ]
        }
    },
    rootVisible: false,
    renderTo: Ext.getBody()
});

var store = Ext.ComponentQuery.query('treepanel')[0].getStore();
store.getRoot().appendChild({ text: 'New Child Node', leaf: true });

• getRoot().appendChild(): স্টোরের মূল নোডের মধ্যে একটি নতুন সন্তান নোড যোগ করা হয়েছে।
• Dynamic Binding: যখন স্টোরে একটি নতুন নোড যোগ করা হয়, Tree Panel স্বয়ংক্রিয়ভাবে রিফ্রেশ হয়ে নতুন নোডটি প্রদর্শন করে।

সারাংশ

1. Tree Panel:
   • ExtJS এর Ext.tree.Panel কম্পোনেন্টটি হায়ারারকিক্যাল ডেটা (গাছের আকারে) প্রদর্শন করতে ব্যবহৃত হয়।
   • এর মাধ্যমে পিতা-পুত্র সম্পর্কযুক্ত ডেটাকে সুন্দরভাবে উপস্থাপন করা যায়।
2. Data Binding:
   • Data Binding এর মাধ্যমে UI কম্পোনেন্ট এবং ডেটার মধ্যে একে অপরের সঙ্গে সিঙ্ক্রোনাইজ করা হয়।
   • স্টোরের ডেটা পরিবর্তন হলে তা UI তে অটোমেটিক্যালি আপডেট হয়।
3. Model:
   • Model ব্যবহার করে আপনি Tree Panel এর জন্য ডেটার কাঠামো এবং বৈশিষ্ট্য সংজ্ঞায়িত করতে পারেন, যা Data Binding এর মাধ্যমে স্টোরের ডেটার সঙ্গে যুক্ত হয়।

এভাবে, ExtJS তে Tree Panel এবং Data Binding ব্যবহার করে আপনি একটি ডাইনামিক এবং রিয়েল-টাইম হায়ারারকিক্যাল ডেটা ভিউ তৈরি করতে পারবেন।

ExtJS এ Tree Store এবং Nested Data ব্যবহার করে আপনি একটি ডাইনামিক ট্রি স্ট্রাকচার তৈরি করতে পারেন, যেখানে ডেটা হায়ারার্কিক্যাল (উপর-নিচ) আকারে উপস্থাপিত হয়। এটি সাধারণত ফাইল সিস্টেম, ক্যাটেগরি বা অন্যান্য হায়ারার্কিক্যাল ডেটার জন্য ব্যবহৃত হয়। Tree Store ডেটাকে পরিচালনা করতে ব্যবহৃত হয়, এবং এটি Model ও Proxy এর মাধ্যমে ডেটা লোড ও ম্যানেজ করতে সহায়ক।

এই গাইডে আমরা Tree Store তৈরি এবং Nested Data লোড করার পদ্ধতি দেখবো।

১. Tree Store এর সংজ্ঞা

Tree Store ExtJS এ একটি স্টোর যা tree data structure কে ম্যানেজ করে। এটি parent-child relationships সহ ডেটা লোড এবং ম্যানেজ করার জন্য ব্যবহৃত হয়।

Tree Store উদাহরণ:

Ext.define('MyApp.store.TreeStore', {
    extend: 'Ext.data.TreeStore',
    model: 'MyApp.model.TreeNode', // মডেলটি TreeNode
    proxy: {
        type: 'memory',  // মেমরি প্রক্সি, ডেটা সরাসরি কোডে লোড হবে
        reader: {
            type: 'json', // JSON ফরম্যাটে ডেটা রিড
            rootProperty: 'children' // JSON ডেটার মূল অংশ
        }
    },
    root: {
        text: 'Root',  // রুট নোডের টেক্সট
        expanded: true, // রুট নোডটি এক্সপ্যান্ডেড থাকবে
        children: [
            { text: 'Child 1', leaf: true },
            { text: 'Child 2', leaf: true },
            { text: 'Child 3', expanded: true, children: [
                { text: 'Grandchild 1', leaf: true },
                { text: 'Grandchild 2', leaf: true }
            ]}
        ]
    }
});

• extend: 'Ext.data.TreeStore': এটি TreeStore কে প্রসারিত (extend) করে।
• proxy: { type: 'memory' }: এখানে memory প্রক্সি ব্যবহার করা হয়েছে, যেটি ডেটা সরাসরি কোডে লোড করবে (এটি অস্থায়ী ডেটা স্টোরেজের মতো কাজ করবে)।
• root: রুট নোড এবং এর উপরের children। এখানে প্রতিটি নোডের জন্য টেক্সট, এক্সপ্যান্ডেড অবস্থা, এবং তার সন্তান (children) নির্ধারণ করা হয়েছে।

২. Model তৈরি করা (TreeNode Model)

TreeStore ব্যবহার করার জন্য একটি Model তৈরি করতে হবে, যা প্রতিটি নোডের ডেটা নির্ধারণ করবে।

TreeNode Model উদাহরণ:

Ext.define('MyApp.model.TreeNode', {
    extend: 'Ext.data.Model',
    fields: [
        { name: 'text', type: 'string' },   // নোডের টেক্সট
        { name: 'leaf', type: 'boolean' },  // যদি নোডটি লিফ (leaf) হয়
        { name: 'expanded', type: 'boolean' } // এক্সপ্যান্ডেড নোড
    ]
});

• text: নোডের টেক্সট।
• leaf: এটি নিশ্চিত করে যে নোডটি একটি পাতার (leaf) নোড কিনা।
• expanded: এটি নির্দেশ করে যে নোডটি ডিফল্টভাবে এক্সপ্যান্ডেড থাকবে কি না।

৩. TreePanel তৈরি করা

ট্রি ডেটা প্রদর্শনের জন্য TreePanel কম্পোনেন্ট ব্যবহার করা হয়। এটি Tree Store এর সাথে যুক্ত হয়ে ডেটা দেখানোর কাজ করে।

TreePanel উদাহরণ:

Ext.create('Ext.tree.Panel', {
    title: 'Tree Example',
    width: 400,
    height: 300,
    store: {
        type: 'tree', // স্টোর টাইপ 'tree' হবে
        model: 'MyApp.model.TreeNode', // এই মডেলটি ব্যবহার করা হবে
        root: {
            text: 'Root',
            expanded: true,
            children: [
                { text: 'Node 1', leaf: true },
                { text: 'Node 2', expanded: true, children: [
                    { text: 'Child 1', leaf: true },
                    { text: 'Child 2', leaf: true }
                ]}
            ]
        }
    },
    rootVisible: false, // রুট নোডটি ভিজিবল হবে না
    renderTo: Ext.getBody()
});

এখানে:

• store: এটি TreeStore ব্যবহার করছে, যার মধ্যে রুট এবং তার সন্তান (children) অন্তর্ভুক্ত।
• rootVisible: false: রুট নোডটি UI তে প্রদর্শন হবে না, শুধুমাত্র তার সন্তানেরা (children) দেখানো হবে।

৪. Nested Data (Nested JSON Data) ব্যবহার করা

প্রকৃত জীবনে, ট্রি ডেটা সাধারণত nested JSON ফরম্যাটে আসে। আপনি যদি সার্ভার থেকে ডেটা নিয়ে আসেন, তাহলে এটি JSON ফরম্যাটে থাকে যা parent-child relationship দেখায়।

Nested Data (JSON) উদাহরণ:

{
  "text": "Root",
  "expanded": true,
  "children": [
    { "text": "Node 1", "leaf": true },
    { "text": "Node 2", "expanded": true, "children": [
        { "text": "Child 1", "leaf": true },
        { "text": "Child 2", "leaf": true }
    ]}
  ]
}

JSON Data লোড করার জন্য TreeStore উদাহরণ:

Ext.define('MyApp.store.TreeStore', {
    extend: 'Ext.data.TreeStore',
    model: 'MyApp.model.TreeNode',
    proxy: {
        type: 'ajax',  // AJAX মাধ্যমে সার্ভার থেকে ডেটা ফেচ
        url: '/treeData', // সার্ভার থেকে JSON ডেটা লোড করার URL
        reader: {
            type: 'json',
            rootProperty: 'children' // JSON ডেটায় children কে রুট হিসেবে ব্যবহার
        }
    },
    root: {
        text: 'Root',
        expanded: true
    }
});

এখানে:

• type: 'ajax': AJAX পদ্ধতি ব্যবহার করে ডেটা লোড করা হচ্ছে।
• url: '/treeData': সার্ভার থেকে ডেটা ফেচ করার URL।
• reader: JSON ডেটা থেকে children অংশ রিড করার জন্য rootProperty কনফিগার করা হয়েছে।

৫. Tree Store এর মাধ্যমে CRUD অপারেশন

ExtJS এর TreeStore ব্যবহার করে CRUD (Create, Read, Update, Delete) অপারেশন করা যায়।

নতুন নোড যোগ করা:

var store = Ext.getStore('MyApp.store.TreeStore');
store.getRoot().appendChild({
    text: 'New Node',
    leaf: true
});

নোড আপডেট করা:

var node = store.getNodeById('nodeId');
node.set('text', 'Updated Node');

নোড মুছে ফেলা:

var node = store.getNodeById('nodeId');
node.remove();

সারাংশ

1. Tree Store: ExtJS তে TreeStore ব্যবহার করে ডেটার হায়ারার্কিক্যাল স্ট্রাকচার ম্যানেজ করা যায়।
2. Model: TreeStore এর জন্য একটি মডেল তৈরি করতে হয় যা প্রতিটি নোডের ডেটা নির্ধারণ করে।
3. TreePanel: TreeStore থেকে ডেটা লোড করে TreePanel কম্পোনেন্টের মাধ্যমে উপস্থাপন করা হয়।
4. Nested Data: JSON ডেটার parent-child সম্পর্ক বিশ্লেষণ করে ট্রি স্ট্রাকচার তৈরি করা হয়।
5. CRUD: TreeStore এর মাধ্যমে আপনি ট্রি ডেটায় CRUD অপারেশন যেমন Create, Read, Update, এবং Delete কার্যক্রম করতে পারবেন।

এই পদ্ধতিগুলির মাধ্যমে আপনি খুব সহজে ডাইনামিক, ইন্টারেক্টিভ এবং হায়ারার্কিক্যাল ডেটা ডিসপ্লে করতে পারবেন।

ExtJS তে Tree কম্পোনেন্ট একটি শক্তিশালী উপাদান যা ডেটাকে হায়ারার্কিক্যালভাবে প্রদর্শন করতে ব্যবহৃত হয়। এটি বিশেষ করে ফাইল এক্সপ্লোরার বা ডিরেক্টরি স্ট্রাকচার, বা এমন কোনও সিস্টেম যেখানে আইটেমগুলির একটি অভ্যন্তরীণ সম্পর্ক রয়েছে, সেখানে ব্যবহৃত হয়। ExtJS তে Tree Node Editing এবং Dynamic Tree Creation বেশ কার্যকরী টুলস যা ডেভেলপারদের জন্য অত্যন্ত সুবিধাজনক।

১. Tree Node Editing

Tree Node Editing এর মাধ্যমে আপনি একটি ট্রি নোডের তথ্য সম্পাদনা করতে পারেন। এটি সাধারণত ব্যবহারকারীদের কোনো নির্দিষ্ট ট্রি নোডের নাম, ধরন বা অন্যান্য প্রপার্টি পরিবর্তন করার সুযোগ দেয়। ExtJS তে Ext.tree.Panel এর মাধ্যমে ট্রি কম্পোনেন্ট তৈরি করা যায় এবং editor কনফিগারেশন ব্যবহার করে এটি এডিটিং সক্ষম করা হয়।

Tree Node Editing উদাহরণ

Ext.create('Ext.tree.Panel', {
    title: 'Editable Tree Panel',
    width: 400,
    height: 300,
    renderTo: Ext.getBody(),
    store: Ext.create('Ext.data.TreeStore', {
        root: {
            expanded: true,
            children: [
                { text: "Node 1", leaf: true },
                { text: "Node 2", expanded: true, children: [
                    { text: "Node 2.1", leaf: true },
                    { text: "Node 2.2", leaf: true }
                ]},
                { text: "Node 3", leaf: true }
            ]
        }
    }),
    columns: [
        {
            xtype: 'treecolumn', // tree column type
            text: 'Name',
            flex: 1,
            dataIndex: 'text',
            editor: {
                xtype: 'textfield' // Textfield for node editing
            }
        }
    ],
    plugins: [{
        ptype: 'treeediting', // enables tree node editing
        pluginId: 'treeEditing',
        clicksToEdit: 1  // Number of clicks required to edit a node
    }],
    listeners: {
        edit: function(editor, e) {
            console.log('Node Edited:', e.record.get('text'));
        }
    }
});

এখানে:

• treeediting প্লাগিন ব্যবহার করা হয়েছে যা ট্রি নোডের এডিটিং সক্ষম করে।
• clicksToEdit: 1: এটি ট্রি নোডে একটি ক্লিক করলে সম্পাদনার জন্য প্রস্তুত করবে।
• editor: textfield এডিটরটি ব্যবহারকারীকে নোডের মান পরিবর্তন করতে দেয়।

এটি ট্রি নোডে পরিবর্তন করার পর edit ইভেন্ট ট্রিগার করবে, যা অ্যাপ্লিকেশনকে জানাবে যে নোডে কী পরিবর্তন হয়েছে।

২. Dynamic Tree Creation

Dynamic Tree Creation এর মাধ্যমে আপনি প্রোগ্রাম্যাটিক্যালি (অথবা ডাইনামিকভাবে) একটি ট্রি তৈরি করতে পারেন। এটি স্টোর বা API থেকে ডেটা লোড করার জন্য ব্যবহার করা হয়, এবং অ্যাপ্লিকেশন চালানোর সময় ট্রি স্ট্রাকচার পরিবর্তন করা যেতে পারে।

Dynamic Tree Creation উদাহরণ

Ext.create('Ext.tree.Panel', {
    title: 'Dynamic Tree Panel',
    width: 400,
    height: 300,
    renderTo: Ext.getBody(),
    store: Ext.create('Ext.data.TreeStore', {
        root: {
            text: 'Root Node',
            expanded: true,
            children: [] // Initially empty, will be dynamically filled
        }
    }),
    columns: [
        {
            xtype: 'treecolumn', // tree column type
            text: 'Name',
            flex: 1,
            dataIndex: 'text'
        }
    ]
});

// Dynamically add nodes to the tree
function addNode() {
    var treePanel = Ext.getCmp('treePanelId');
    var rootNode = treePanel.getRootNode();
    
    rootNode.appendChild({
        text: 'New Dynamic Node',
        leaf: true
    });
}

// Adding nodes dynamically after 2 seconds
setTimeout(function() {
    addNode();
    addNode();  // Adding another node
}, 2000);

এখানে:

• rootNode.appendChild ব্যবহৃত হয়েছে একটি নতুন নোড অ্যাড করার জন্য।
• setTimeout এর মাধ্যমে 2 সেকেন্ড পর ডায়নামিকভাবে নোড যোগ করা হয়েছে।
• Initially, ট্রি স্টোরে কোনও চাইল্ড নোড ছিল না, পরে ডাইনামিকভাবে নোড যোগ করা হয়েছে।

৩. Tree Node Editing এবং Dynamic Tree Creation একসাথে ব্যবহার করা

আপনি Tree Node Editing এবং Dynamic Tree Creation একসাথে ব্যবহার করতে পারেন যাতে ব্যবহারকারী ট্রি নোডে ডেটা এডিট করতে পারে এবং ডাইনামিকভাবে নতুন নোডও তৈরি করতে পারে।

উদাহরণ: Tree Node Editing এবং Dynamic Tree Creation একসাথে

Ext.create('Ext.tree.Panel', {
    title: 'Editable and Dynamic Tree Panel',
    width: 400,
    height: 300,
    renderTo: Ext.getBody(),
    store: Ext.create('Ext.data.TreeStore', {
        root: {
            text: 'Root Node',
            expanded: true,
            children: [] // Initially empty, will be dynamically filled
        }
    }),
    columns: [
        {
            xtype: 'treecolumn', // tree column type
            text: 'Name',
            flex: 1,
            dataIndex: 'text',
            editor: {
                xtype: 'textfield'
            }
        }
    ],
    plugins: [{
        ptype: 'treeediting', // enables tree node editing
        pluginId: 'treeEditing',
        clicksToEdit: 1
    }],
    listeners: {
        edit: function(editor, e) {
            console.log('Node Edited:', e.record.get('text'));
        }
    }
});

// Dynamically add nodes to the tree
function addNode() {
    var treePanel = Ext.getCmp('treePanelId');
    var rootNode = treePanel.getRootNode();
    
    rootNode.appendChild({
        text: 'New Dynamic Node',
        leaf: true
    });
}

// Adding nodes dynamically after 2 seconds
setTimeout(function() {
    addNode();
    addNode();  // Adding another node
}, 2000);

এখানে:

• ট্রি তৈরি করা হয়েছে যেখানে ডাইনামিকভাবে নোড যোগ করা যাচ্ছে এবং সেই নোডের নামও এডিট করা যাচ্ছে।
• ব্যবহারকারী একটি নোডে ক্লিক করলে সেটি সম্পাদনা করতে সক্ষম হবে এবং নতুন নোডগুলোও ডাইনামিকভাবে যোগ করা হবে।

৪. Additional Features

• Lazy Loading: আপনি যদি একটি বড় ট্রি স্ট্রাকচার ব্যবহার করেন, তবে আপনি lazy loading (যার মাধ্যমে নোডগুলি ডাইনামিকভাবে লোড হয় যখন প্রয়োজন) ব্যবহার করতে পারেন।
• Drag-and-Drop: ExtJS তে ট্রি কম্পোনেন্টে ড্র্যাগ এবং ড্রপ সমর্থন রয়েছে, যা ব্যবহারকারীদের নোডগুলি সরাতে বা পুনর্বিন্যাস করতে সাহায্য করে।

সারাংশ

1. Tree Node Editing: ExtJS এর মাধ্যমে আপনি ট্রি নোডের ডেটা সম্পাদনা করতে পারেন। এর জন্য treeediting প্লাগিন ব্যবহার করা হয়, যা ব্যবহারকারীদের ট্রি নোড এডিট করার সুযোগ দেয়।
2. Dynamic Tree Creation: ExtJS তে আপনি ডাইনামিকভাবে ট্রি তৈরি করতে পারেন। নতুন নোড যোগ করতে বা ট্রি স্ট্রাকচার পরিবর্তন করতে appendChild ব্যবহার করা হয়।
3. Integration: আপনি এই দুটি বৈশিষ্ট্য একসাথে ব্যবহার করতে পারেন, যা ব্যবহারকারীদের জন্য ট্রি স্ট্রাকচার সম্পাদনা এবং ডাইনামিকভাবে পরিবর্তন করা সহজ করে তোলে।

এই দুটি ফিচারের সমন্বয়ে একটি অত্যন্ত ইন্টারঅ্যাকটিভ এবং ডাইনামিক ট্রি তৈরি করা সম্ভব, যা একটি কার্যকর এবং ইউজার-বান্ধব এক্সপিরিয়েন্স প্রদান করে।

ExtJS একটি শক্তিশালী ফ্রন্টএন্ড ফ্রেমওয়ার্ক যা ইউজার ইন্টারফেস (UI) তৈরি করতে ব্যবহৃত হয়। এর মধ্যে Drag and Drop সমর্থন এবং Node Manipulation এর মতো ফিচার রয়েছে, যা অ্যাপ্লিকেশনের ইন্টারঅ্যাকশন এবং DOM (Document Object Model) নিয়ন্ত্রণ করার ক্ষমতা বৃদ্ধি করে। এই ফিচারগুলো অ্যাপ্লিকেশনকে আরও ইন্টারেক্টিভ, ব্যবহারকারী বান্ধব এবং কার্যক্ষম করে তোলে।

১. Drag and Drop Support in ExtJS

Drag and Drop (ড্র্যাগ এবং ড্রপ) হল একটি গুরুত্বপূর্ণ বৈশিষ্ট্য যা ব্যবহারকারীদের UI এলিমেন্টগুলিকে এক স্থান থেকে অন্য স্থানে টেনে নিয়ে যাওয়ার ক্ষমতা দেয়। ExtJS তে Drag and Drop সমর্থন বেশ শক্তিশালী, এবং এটি বিভিন্ন কম্পোনেন্টের মধ্যে ডেটা স্থানান্তর করতে সহায়ক।

ExtJS তে Drag and Drop সমর্থন কিভাবে কাজ করে:

• DragSource: এটি একটি এলিমেন্ট যা ড্র্যাগ করা যায়।
• DropTarget: এটি একটি এলিমেন্ট যা ড্রপ করা যায়।

উদাহরণ: ড্র্যাগ এবং ড্রপ ব্যবহারে দুইটি প্যানেল

Ext.create('Ext.panel.Panel', {
    title: 'Draggable Panel',
    width: 300,
    height: 200,
    renderTo: Ext.getBody(),
    draggable: true, // প্যানেলটি ড্র্যাগ করা যাবে
    html: 'Drag this panel'
});

Ext.create('Ext.panel.Panel', {
    title: 'Drop Target',
    width: 300,
    height: 200,
    renderTo: Ext.getBody(),
    style: { marginTop: '10px' },
    html: 'Drop here',
    listeners: {
        render: function(panel) {
            panel.getEl().on('drop', function(e) {
                Ext.Msg.alert('Dropped', 'Item has been dropped!');
            });
        }
    }
});

ব্যাখ্যা:

• draggable: true: এটি একটি প্যানেলকে ড্র্যাগযোগ্য করে তোলে।
• on('drop', ...): ড্রপ ইভেন্টে একটি ফাংশন কল করা হয় যখন প্যানেলটিতে ড্রপ করা হয়।

২. Node Manipulation in ExtJS

Node Manipulation হল DOM (Document Object Model) এর মাধ্যমে HTML উপাদানগুলিকে প্রোগ্রাম্যাটিকভাবে পরিবর্তন করা। ExtJS তে Node Manipulation খুবই সহজ এবং এটি বিভিন্ন ডম উপাদানের সাথে ইন্টারঅ্যাক্ট করার জন্য শক্তিশালী API সরবরাহ করে।

Node Manipulation এর প্রধান ফিচারগুলো:

• Ext.DomQuery: DOM নোড অনুসন্ধান করার জন্য ব্যবহৃত হয়।
• Ext.get: DOM এলিমেন্টে সরাসরি অ্যাক্সেস করার জন্য ব্যবহৃত হয়।
• setHtml, setText: HTML বা টেক্সট কনটেন্ট পরিবর্তন করা।
• appendChild, insertBefore: নতুন উপাদান যোগ করা বা পুরনো উপাদান পরিবর্তন করা।

উদাহরণ: DOM নোড ম্যানিপুলেশন

Ext.create('Ext.button.Button', {
    text: 'Click Me',
    renderTo: Ext.getBody(),
    handler: function() {
        var node = Ext.get('myNode'); // DOM নোড নির্বাচন
        node.setHtml('This is a new content!'); // HTML পরিবর্তন করা
    }
});

Ext.create('Ext.Panel', {
    id: 'myNode',
    title: 'Panel',
    html: 'Original Content',
    renderTo: Ext.getBody()
});

ব্যাখ্যা:

• Ext.get('myNode'): এটি id='myNode' সহ একটি DOM নোড নির্বাচন করে।
• setHtml(): এই মেথডটি DOM নোডে HTML কনটেন্ট আপডেট করতে ব্যবহৃত হয়।

৩. Drag and Drop API এর ব্যবহার

ExtJS তে Drag and Drop API খুবই শক্তিশালী এবং এটি কাস্টম ড্র্যাগ এবং ড্রপ ইভেন্ট তৈরি করতে সহায়ক। ড্র্যাগ এবং ড্রপ করার সময়, আপনি কাস্টম কন্ডিশন চেক করতে পারেন, যেমন যদি ড্রপ এলিমেন্ট সঠিক হয় তবে ড্রপ হতে দেয় এবং না হলে ব্লক করে দেয়।

কাস্টম Drag and Drop উদাহরণ:

Ext.create('Ext.panel.Panel', {
    title: 'Drag Me',
    width: 200,
    height: 100,
    renderTo: Ext.getBody(),
    draggable: {
        moveOnEnter: true, // ড্র্যাগের সময় মুভমেন্ট
        constrain: true    // প্যানেলটি ড্র্যাগ করার সময় সীমাবদ্ধ রাখা
    },
    html: 'Drag me!'
});

Ext.create('Ext.panel.Panel', {
    title: 'Drop Area',
    width: 200,
    height: 100,
    style: { marginTop: '10px' },
    renderTo: Ext.getBody(),
    listeners: {
        render: function(panel) {
            panel.getEl().on('drop', function(e) {
                Ext.Msg.alert('Dropped', 'You dropped something!');
            });
        }
    }
});

ব্যাখ্যা:

• draggable: ড্র্যাগ করার সময় প্যানেলটি কীভাবে আচরণ করবে তা নির্ধারণ করে (যেমন, moveOnEnter এবং constrain এর মাধ্যমে সীমাবদ্ধ করা)।
• panel.getEl().on('drop', ...): প্যানেলটিতে ড্রপ ইভেন্ট শোনার জন্য ব্যবহার করা হয়।

৪. Node Manipulation API উদাহরণ

Ext.create('Ext.button.Button', {
    text: 'Add Node',
    renderTo: Ext.getBody(),
    handler: function() {
        // নতুন ডম নোড তৈরি
        var newNode = Ext.create('Ext.Component', {
            html: 'New Node Added'
        });
        // DOM এ নতুন নোড যোগ করা
        Ext.get('myNode').appendChild(newNode.el);
    }
});

Ext.create('Ext.Panel', {
    id: 'myNode',
    title: 'Container Panel',
    html: 'Initial Content',
    renderTo: Ext.getBody()
});

ব্যাখ্যা:

• appendChild(): এই মেথডটি DOM এ নতুন উপাদান (নোড) যোগ করতে ব্যবহৃত হয়।

সারাংশ

1. Drag and Drop: ExtJS তে Drag and Drop ফিচার ব্যবহারকারীকে ইন্টারঅ্যাকটিভভাবে UI এলিমেন্টগুলি টেনে নিয়ে যেতে এবং ড্রপ করতে দেয়। এটি DragSource এবং DropTarget এর মাধ্যমে কাজ করে।
2. Node Manipulation: ExtJS এর Node Manipulation API ডেভেলপারদের DOM উপাদানগুলিকে সহজে পরিবর্তন এবং ম্যানিপুলেট করার সুযোগ দেয়। এটি ডেটার ডাইনামিক পরিবর্তন এবং UI কন্টেন্ট ম্যানিপুলেশন করার জন্য ব্যবহৃত হয়।
3. ব্যবহারকারী অভিজ্ঞতা: Drag and Drop এবং Node Manipulation ব্যবহারকারীদের জন্য আরও ইন্টারেক্টিভ এবং গতিশীল ইউজার ইন্টারফেস তৈরি করতে সাহায্য করে, যা অ্যাপ্লিকেশনকে আরও ব্যবহারকারী-বান্ধব করে তোলে।

ExtJS তে এই ফিচারগুলো ব্যবহার করে আপনি অত্যন্ত ইন্টারেক্টিভ এবং ডাইনামিক ইউজার ইন্টারফেস তৈরি করতে পারেন, যা ব্যবহারকারীদেরকে আরও সহজে এবং কার্যকরীভাবে অ্যাপ্লিকেশনের সাথে ইন্টারঅ্যাক্ট করতে সহায়ক।